'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView,
  BackAndroid
} from 'react-native';
import NavigationBar from 'react-native-navbar';

import HttpView from './http.js'
import GuideView from './guidePage.js'

var _navigator ;
var _route;
class ExampleList extends React.Component{

  handleBack =()=> {
    console.log("back pressed ...");
    if (_navigator && _navigator.getCurrentRoutes().length > 1) {
      _navigator.pop()
      return true
    }
    return false
  }

  constructor (props) {
   super(props)
   console.log("init ...");
   this.handleBack = this.handleBack.bind(this) // 返回一个绑定好this的方法并存储于当前实例中
  }

  componentWillReceiveProps(){
    console.log("receive ...");
  }

  componentDidMount () {
    console.log("did mount ...");
    BackAndroid.addEventListener('hardwareBackPress', this.handleBack)
  }

  componentWillUnmount () {
    console.log("will unmount ...");
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBack)
  }

  componentWillMount(){
    console.log("will mount ...");
    _navigator = this.props.navigator;
    _route = this.props;
  }

  httpAndListView(){
    _navigator.push({
      name: 'HttpView',
      component: HttpView,
      params:{
        user:_route.user,
        pwd:_route.pwd,
        msg:_route.msg
      }
    });
  }

  guideView(){
    _navigator.push({
      name: 'guidePage',
      component: GuideView
    });
  }

  tabView(){

  }

  render() {
    var id = _route.msg;
    const titleConfig = {
      title: '示例集合'
    };
    const leftConfig = {
      title:'返回',
      handler: function onNext() {
        _navigator.pop();
      }
    }
    return (
      <View style={{flex:1}}>
      <NavigationBar
      style={styles.common}
      leftButton={leftConfig}
      title={titleConfig} />
      <TouchableOpacity style={ styles.button }>
      <Text>欢迎回来: {id},请选择</Text>
      </TouchableOpacity>
      <ScrollView style={styles.scrollView}>
      <View style={{flex:1}} >
      <TouchableOpacity onPress={()=>this.httpAndListView()} style={ styles.button }>
      <Text>网络请求和列表</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.guideView()} style={ styles.button }>
      <Text>引导页面</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={()=>this.tabView()} style={ styles.button }>
      <Text>tabView</Text>
      </TouchableOpacity>
      </View>
      </ScrollView>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  button: {
    backgroundColor: '#e2e2e2',
    marginLeft: 20,
    marginRight: 20,
    marginTop: 20,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    height:50
  },
  scrollView:{
    marginTop:10,
    marginBottom:10,
    marginLeft: 10,
    marginRight: 10
  },
  common:{
    marginLeft: 10,
    marginRight: 10
  }
});
module.exports = ExampleList;
